﻿<template>
<form-container
    :title="formData.id ? '编辑用户' : '增加用户'"
    :width="600"
    :visible="visible"
    :destroy-on-close="true"
    @close="onClose"
>
    <a-form ref="formRef" :model="formData" :rules="formRules" layout="vertical">
        <a-form-item label="性别" name="sex">
          <a-select v-model:value="formData.sex" show-search placeholder="请选择性别" :options="sexOptions" />
        </a-form-item>
        <a-form-item label="微信号" name="weChat">
          <a-input v-model:value="formData.weChat" placeholder="请输入微信号" allow-clear />
        </a-form-item>
        <a-form-item label="手机号" name="phone">
          <a-input v-model:value="formData.phone" placeholder="请输入手机号" allow-clear />
        </a-form-item>
        <a-form-item label="年级" name="grade">
          <a-select v-model:value="formData.grade" show-search placeholder="请选择年级" :options="gradeOptions" />
        </a-form-item>
        <a-form-item label="头像" name="url">
          <a-input v-model:value="formData.url" placeholder="请输入url" allow-clear />
                </a-form-item>
        <a-form-item label="昵称" name="name">
          <a-input v-model:value="formData.name" placeholder="请输入昵称" allow-clear />
        </a-form-item>
        <a-form-item label="身份类型" name="type">
          <a-select v-model:value="formData.type" show-search placeholder="请选择身份类型" :options="typeOptions" />
        </a-form-item>
        <a-form-item label="学校名称" name="schoolName">
          <a-select v-model:value="formData.schoolName" show-search placeholder="请选择学校名称" :options="fkBuSchoolOptions" />
        </a-form-item>
    </a-form>
    <template #footer>
        <a-button style="margin-right: 8px" @click="onClose">关闭</a-button>
        <a-button type="primary" @click="onSubmit" :loading="submitLoading">保存</a-button>
    </template>
</form-container>
</template>

<script setup name="buUserForm">
  import tool from '@/utils/tool'
  import { cloneDeep } from 'lodash-es'
  import { required } from '@/utils/formRules'
  import buUserApi from '@/api/biz/buUserApi'

  // 抽屉状态
  const visible = ref(false)  
  // 定义emit事件
  const emit = defineEmits({ successful: null }) 
  //表单
  const formRef = ref()  
  // 表单数据，也就是默认给一些数据
  const formData = ref({})
  //提交等待
  const submitLoading = ref(false)
  
  
  //性别选项
  const sexOptions = ref([])
  //年级选项
  const gradeOptions = ref([])
  //身份类型选项
  const typeOptions = ref([])
  
  const fkBuSchoolOptions = ref() //学校名称数据
  const getFkBuSchoolOptions= () => {
  buUserApi.buuserFkBuSchoolSelector().then((data) => {
    fkBuSchoolOptions.value = data
  })
  }
  
   
  // 打开抽屉 
  const onOpen = (record) => {
      visible.value = true //显示抽屉
      getFkBuSchoolOptions()
      
	  //表单数据
      formData.value = {
      }
      if (record) {
        let recordData = cloneDeep(record)
        formData.value = Object.assign({}, recordData)
        //const param = {
        //  id: record.id
        //}
        //buUserApi.buUserDetail(param).then((data) => {
        //  formData.value = Object.assign({}, data)
        //  })
      }  
      sexOptions.value = tool.dictList('Sex')
      gradeOptions.value = tool.dictList('Grade')
      typeOptions.value = tool.dictList('Type')
  }
  
  // 关闭抽屉
  const onClose = () => {
      formRef.value.resetFields()
      formData.value = {}
      visible.value = false
  }
  
  // 默认要校验的
  const formRules = {
      phone: [required('请输入手机号')],
  }

  // 验证并提交数据
  const onSubmit = () => {
      formRef.value.validate().then(() => {
          submitLoading.value = true
          const formDataParam = cloneDeep(formData.value)
          buUserApi
              .submitForm(formDataParam, formDataParam.id)
              .then(() => {
                  onClose()
                  emit('successful')
              })
              .finally(() => {
                  submitLoading.value = false
              })
      })
  }
  // 抛出函数
  defineExpose({
  onOpen
  })
</script>

